<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
</head>
<body>
<div id="app">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> **管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <a class="button border-green" href="/admin/category/updateoradd.html">
                        <span class="icon-edit"></span> 添加</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>**</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <!--在这里遍历列表显示记录-->
                <tr v-for="item in list">
                    <td>{{ item.id }}</td>
                    <td>**</td>
                    <td>
                        <a class="btn btn-sm btn-warning" :href="'updateoradd.html?id=' + item.id">修改</a>
                        <button class="btn btn-sm btn-danger" @click="del(item.id)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="center">
                        <nav aria-label="Page navigation ">
                            <ul class="pagination">
                                <li class="page-item" v-if="page.hasPreviousPage">
                                    <a class="page-link" href="#" @click="goto(page.prePage)">上一页</a>
                                </li>
                                <li :class="'page-item ' + (page.pageNum===item?'active':'')"
                                    v-for="item in page.navigatepageNums">
                                    <a class="page-link"  href="#" @click="goto(item)">{{ item }}</a>
                                </li>
                                <li class="page-item" v-if="page.hasNextPage">
                                    <a class="page-link" href="#" @click="goto(page.nextPage)">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        'el': '#app',
        'data': {
            list: [],
            page: {},
            pageNum: 1,
            pageSize: 5
        },
        'methods': {
            goto(pn) {
                this.pageNum = pn
                this.loadData()
            },
            loadData() {

            }
        },
        mounted() {
            // 手动调用分页查询的函数
            this.loadData()
        }
    })


</script>
</body>
</html>